<template>
  <div>
    <div class="base_screen_header">
      <div></div>
      <el-form :inline="true" class="base_search_form" @submit.prevent>
        <el-form-item>
          <el-select
            v-model="base"
            @change="searchBase"
            placeholder="请选择基地"
            clearable
          >
            <el-option
              v-for="(item, index) in baseOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="orderCode"
            @keyup[native].enter="searchOrderCode"
            @change="searchOrderCode"
            placeholder="订单编号"
            :suffix-icon="Search"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="afterSaleCode"
            @keyup[native].enter="searchAfterSale"
            @change="searchAfterSale"
            placeholder="售后单号"
            :suffix-icon="Search"
            clearable
          />
        </el-form-item>
      </el-form>
    </div>
    <StatusBar :data="statusList" default="all" />
    <div v-if="props.type == 'order'" class="base_main_header">
      <el-button type="primary" text @click="getExport">导出</el-button>
    </div>
    <div v-else class="base_main_margin_top"></div>
    <DataCollectTable
      :data="data"
      :total="total"
      :config="config"
      @operationsHander="opHander.receive"
    >
    </DataCollectTable>
    <CancelAfterSale
      ref="cancelAfterSaleRef"
      @cancelAfterSale="cancelAfterSale"
    ></CancelAfterSale>
    <ConfirmAfterSale
      ref="confirmAfterSaleRef"
      :desc="expenseAftersale"
      :money="refundMoney"
      @submit="confirmAfterSale"
    />
  </div>
</template>

<script setup>
import StatusBar from "@com/StatusBar.vue";
import DataCollectTable from "@com/table/DataCollectTable.vue";
import CancelAfterSale from "@com/order/CancelAfterSale.vue";
import ConfirmAfterSale from "@com/order/ConfirmAfterSale.vue";

import {
  OP_KEY,
  OPERATIONS,
  operationsHander,
} from "@com/table/tableOperations";
import { $msg, $box } from "@ui/msg";
import { ref, reactive, defineProps } from "vue";
import { Search } from "@element-plus/icons-vue";
import useRoute from "@util/router";
import $ from "@util/base";
import configApi from "@api/config";
import api from "@api/afterSaleOrder";

const props = defineProps({
  type: {
    type: String,
  },
  routeName: {
    type: String,
  },
});

const route = useRoute();

route.watchRouter(props.routeName, () => {
  getData();
});

// 1052001 待审核、1052004 已完成、1052003 已取消、1052002 处理中
const statusList = reactive([
  {
    label: "全部",
    value: "all",
    total: 0,
  },
  {
    label: "待审核",
    value: "1052001",
    total: 0,
  },
  {
    label: "处理中",
    value: "1",
    total: 0,
  },
  {
    label: "已完成",
    value: "1052004",
    total: 0,
  },
  {
    label: "已取消",
    value: "1052003",
    total: 0,
  },
]);

const baseOptions = ref([]);
const base = ref(route.query().base || "");
const orderCode = ref(route.query().orderCode || "");
const afterSaleCode = ref(route.query().afterSaleCode || "");
const total = ref(0);
const data = ref([]);

getConfig();

function getConfig() {
  configApi.base((val) => {
    baseOptions.value = val;
  });
}

function getOperations(data) {
  if (props.type == "order") {
    // 1052001	待审核
    // 1052002	已审核
    // 1052003	已取消
    // 1052004	已完成
    // 1052005	待退回货物
    // 1052006	已退回待确认
    // 1052007	退款中
    // 1053	售后类型
    // 1053001	退货退款
    // 1053002	仅退款
    // 1054	通用任务类型
    // 1054001	退款单自动退款
    // 1054002	售后单退还储值金额
    switch (data.afterSaleStatus) {
      case "1052001":
        return [
          OPERATIONS.check,
          OPERATIONS.confirmAfterSale,
          OPERATIONS.cancelAfterSale,
        ];
      case "1052005":
        return [OPERATIONS.check, OPERATIONS.confirmTakeOver];
      case "1052006":
        return [OPERATIONS.check, OPERATIONS.confirmTakeOver];
      default:
        return [OPERATIONS.check];
    }
  } else {
    return [OPERATIONS.check];
  }
}

const config = {
  showIndex: true,
  operations: {
    label: "操作",
    width: 120,
    operations: getOperations,
  },
  column: [
    {
      label: "订单类型",
      prop: "mainBusiTypeName",
      width: 120,
    },
    {
      label: "售后单号",
      prop: "afterSaleCode",
    },
    {
      label: "订单编号",
      prop: "orderCode",
    },
    {
      label: "退款金额",
      prop: "refundMoney",
      width: 120,
    },
    {
      label: "售后状态",
      prop: "afterSaleStatusName",
      width: 120,
    },
    {
      label: "售后类型",
      prop: "orderTypeName",
      width: 90,
    },
    {
      label: "售后时间",
      prop: "createTime",
      width: 100,
    },
  ],
};

const cancelAfterSaleRef = ref(null);
const confirmAfterSaleRef = ref(null);
let selectOpData = null;

const opHander = operationsHander();
opHander.install(OP_KEY.check, (data) => {
  switch (data.mainBusiType) {
    case "1017001":
      route.push({
        name: "goodsorderdetails",
        query: {
          code: data.orderCode,
          afterSaleCode: data.afterSaleCode,
          type: "after",
        },
      });
      break;
    case "1017002":
      route.push({
        name: "travelorderdetails",
        query: {
          code: data.orderCode,
          afterSaleCode: data.afterSaleCode,
          type: "after",
        },
      });
      break;
    case "1017003":
      route.push({
        name: "hotelorderdetails",
        query: {
          code: data.orderCode,
          afterSaleCode: data.afterSaleCode,
          type: "after",
        },
      });
      break;
  }
});

function confirmAfterSale(money) {
  api.confirm(selectOpData.afterSaleCode, money, () => {
    $msg.succ("退款成功");
    getData();
  });
}

const expenseAftersale = ref(null);
const refundMoney = ref(null);
opHander.install(OP_KEY.confirmAfterSale, (data) => {
  selectOpData = data;
  expenseAftersale.value = data.expenseAftersale;
  refundMoney.value = data.refundMoney;
  confirmAfterSaleRef.value.show();
});

opHander.install(OP_KEY.cancelAfterSale, (data) => {
  selectOpData = data;
  cancelAfterSaleRef.value.show();
});

function cancelAfterSale(data) {
  if (selectOpData != null) {
    api.cancel(
      {
        afterSaleCode: selectOpData.afterSaleCode,
        remark: data.reason,
      },
      () => {
        $msg.succ("取消成功");
        getData();
      }
    );
  } else {
    $msg.error("请重新选择记录操作");
  }
}

opHander.install(OP_KEY.confirmTakeOver, (data) => {
  $box.alert(
    "确认收货",
    `<div>确定已收到退货商品？</div><div>${data.expressName}：${data.expressNo}</div>`,
    () => {
      api.takeOver(data.afterSaleCode, () => {
        $msg.succ("确定收货成功");
        getData();
      });
    }
  );
});

function searchBase(val) {
  route.replaceQuery("base", val);
}

function searchOrderCode(val) {
  route.replaceQuery("orderCode", val);
}

function searchAfterSale(val) {
  route.replaceQuery("afterSaleCode", val);
}

getData();
function getData() {
  getNum();
  getList();
}

function getNum() {
  api.num((val) => {
    statusData(val);
  });
}

function statusData(val) {
  statusList.forEach((e, i) => {
    e.total = val[i];
  });
}

function getList() {
  let routeQuery = route.query();
  let params = {
    shopCode: routeQuery.base,
    orderCode: routeQuery.orderCode,
    afterSaleCode: routeQuery.afterSaleCode,
    status: routeQuery.status,
    page: routeQuery.p,
    size: routeQuery.s,
  };
  api.list(params, (val) => {
    total.value = val.total;
    data.value = val.list;
  });
}

function getExport() {
  let routeQuery = route.query();
  let params = {
    shopCode: routeQuery.base,
    orderCode: routeQuery.orderCode,
    afterSaleCode: routeQuery.afterSaleCode,
    status: routeQuery.status,
  };
  api.export(params, (val) => {
    $.download(val.url, "售后订单导出");
  });
}
</script>

<style lang="scss"></style>
